<div id="pagination"><?=$this->pagination->create_links()?></div>
<ul id="mediaList" class="gallery media-list ui-helper-reset ui-helper-clearfix">
	<?php if(!empty($img_list)):$i=0?>
	<?php foreach($img_list as $item):?>
	<li class="ui-widget-content ui-corner-tr">
		<input name="item_media_ids[]" type="hidden" value="<?=$item['id']?>"/>
		<h5 class="ui-widget-header"><?=$item['title']?></h5>
		<img src="<?=$media_thumb['user_media_url'].$item['rawname'].$media_thumb['thumb_marker'].$item["fileext"]?>" alt="<?=$item['title']?>" width="<?=$media_thumb['width']?>" height="<?=$media_thumb['height']?>"/>
		<a href="<?=$media_thumb['user_media_url'].$item['filename']?>" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
		<a href="link/to/trash/script/when/we/have/js/off" title="Add this image" class="ui-icon ui-icon-plus">Add image</a>
	</li>
	<?php $i++;endforeach;?>
	<?php endif;?>
</ul>
<div class="clearfix"></div>
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
	$(function() {
		// there's the gallery and the trash
		var $gallery = $('#mediaList'), $trash = $('#mediaOwner'), $represent = $("#represent");
	
		$('ul',$trash).sortable();
	
		// let the gallery items be draggable
		$('li',$gallery).draggable({
			cancel: 'a.ui-icon',// clicking an icon won't initiate dragging
			revert: 'invalid', // when not dropped, the item will revert back to its initial position
			containment: $('#demo-frame').length ? '#demo-frame' : 'document', // stick to demo-frame if present
			helper: 'clone',
			cursor: 'move'
		});
		$('ul',$trash).draggable({
			connectToSortable: '#mediaOwner ul',
			helper: 'clone',
			revert: 'invalid'
		});
		// let the trash be droppable, accepting the gallery items
		$trash.droppable({
			accept: '#mediaList li',
			activeClass: 'ui-state-highlight',
			drop: function(ev, ui) {
				deleteImage(ui.draggable);
			}
		});
	
		// let the gallery be droppable as well, accepting items from the trash
		$gallery.droppable({
			accept: '#mediaOwner li',
			activeClass: 'custom-state-active',
			drop: function(ev, ui) {
				recycleImage(ui.draggable);
			}
		});
	
		// let add representation image, acceipting item from the trash
		$represent.droppable({
			accept: '#mediaOwner li',
			drop: function(ev, ui){
				var $mediaId = ui.draggable.find('input').val();
				var $srcImg = ui.draggable.find('img').attr("src");
				$represent.find('input').val($mediaId);
				$represent.find('img').attr("src", $srcImg);
			}
		});
	
		// image deletion function
		var recycle_icon = '<a href="link/to/recycle/script/when/we/have/js/off" title="Recycle this image" class="ui-icon ui-icon-refresh">Recycle image</a>';
		function deleteImage($item) {
			var $id = $item.find('input').val();
			var $flag = true;
			// Check id is exist;
			$("#mediaOwner").find("input").each(function(){
				if($id==$(this).val()){
					$flag = false;
				}
			});
			if($flag){
				$item.fadeOut(function() {
						var $list = $('ul',$trash).length ? $('ul',$trash) : $('<ul class="gallery ui-helper-reset"/>').appendTo($trash);
	
					$item.find('a.ui-icon-plus').remove();
					$item.append(recycle_icon).appendTo($list).fadeIn(function() {
						$item.animate({ width: '96px' }).find('img').animate({ height: '64px' });
					});
				});
			}
			else{
				return $item.draggable('option', 'revert', true);
			}
		}
	
		// image recycle function
		var trash_icon = '<a href="link/to/trash/script/when/we/have/js/off" title="Add this image" class="ui-icon ui-icon-plus">Add image</a>';
		function recycleImage($item) {
			$item.fadeOut(function() {
				$item.find('a.ui-icon-refresh').remove();
				$item.css('width','120px').append(trash_icon).find('img').css('height','80px').end().appendTo($gallery).fadeIn();
			});
		}
	
		// image preview function, demonstrating the ui.dialog used as a modal window
		function viewLargerImage($link) {
			var src = $link.attr('href');
			var title = $link.siblings('img').attr('alt');
			var $modal = $('img[src$="'+src+'"]');
	
			if ($modal.length) {
				$modal.dialog('open');
			} else {
				var img = $('<img alt="'+title+'" style="display:none;padding:8px;width:784px;"/>').attr('src',src).appendTo('body');
				setTimeout(function() {
					img.dialog({
							title: title,
							width: 800,
							modal: true
						});
				}, 1);
			}
		}
	
		// resolve the icons behavior with event delegation
		$('ul.gallery > li').click(function(ev) {
			var $item = $(this);
			var $target = $(ev.target);
			if ($target.is('a.ui-icon-plus')) {
				deleteImage($item);
			} else if ($target.is('a.ui-icon-zoomin')) {
				viewLargerImage($target);
			} else if ($target.is('a.ui-icon-refresh')) {
				recycleImage($item);
			}
	
			return false;
		});
	
		$('ul',$trash).disableSelection();
	
		$("#setForm").validate();
		$("#pagination a").click(function(){
			var link = $(this).attr('href');
			$("#Gallery").load(link);
			return false;
		});
	});
});
</script>